<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
<style>

.chevron span.fa.collapse-chevron:before {
    content: "\f077"; /* fa-chevron-up */
}

.chevron.collapsed span.fa.collapse-chevron:before {
    content: "\f078"; /* fa-chevron-down */
}

.panel .table-responsive.cluster-peers {
  margin-bottom: 0;
}

.panel .table-responsive.cluster-peers .table {
  margin-bottom: 0;
}

</style>
</wicket:head>
</head>
<body>
<wicket:panel>

<!-- <div wicket:id="messages">

<wicket:enclosure child="info">
  <div class="alert alert-info" wicket:id="info">Please select an etcd registry to view its contents</div>
</wicket:enclosure> -->

  <!-- <div class="alert" wicket:id="feedback"></div> -->

<!-- </div> -->

<div class="panel panel-default">

  <div class="panel-heading">
    <div class="row">
      <div class="col-xs-8 col-sm-9">
        <div class="input-group" wicket:id="selectInputGroup">
          <input type="text" wicket:id="selectedCluster" class="form-control" placeholder="select etcd registry" readonly>
          <div class="input-group-btn">
            <button class="btn btn-default dropdown-toggle tooltip-trigger" type="button" data-toggle="dropdown" aria-expanded="false" title="Select etcd registry"><span class="fa fa-caret-down"></span></button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
              <li wicket:id="clusters"><a wicket:id="select"><span wicket:id="name"></span> @ <span wicket:id="address"></span></a></li>
              <li class="divider"></li>
              <li><a wicket:id="addCluster" data-toggle="modal"><span class="fa fa-plus"></span> Add another registry</a></li>
            </ul>
          </div>
        </div>
      </div><!-- ./col-xs-8 -->
      <div class="col-xs-4 col-sm-3">
        <div class="pull-left">
          <a wicket:id="deleteCluster" class="btn btn-default tooltip-trigger" data-toggle="modal" title="Removes currently selected etcd registry"><span class="fa fa-remove"></span></a>
        </div>
        <div class="pull-right">
          <a class="btn btn-default chevron collapsed tooltip-trigger" data-toggle="collapse" href="#collapsingBody" aria-expanded="false" title="Show/hide etcd cluster nodes"><span class="fa collapse-chevron"></span></a>
        </div>
      </div><!-- ./col-xs-4 -->
    </div><!-- ./row -->
  </div> <!-- ./panel-heading -->

  <div id="collapsingBody" class="collapse" aria-expanded="false">

    <div class="panel-body" wicket:id="body">

      <div class="row">
        <!-- <div class="col-sm-6 h4"><span class="fa fa-tag"></span> <span wicket:id="name"></span> <small wicket:id="address">[leader address]</small></div> -->

        <div class="col-sm-6 h4"><span class="fa fa-tag"></span> <strong wicket:id="name"></strong> <span class="hidden text-muted" wicket:id="address">[leader address]</span></div>

        <div class="col-sm-6 text-muted text-right">Last refresh at <span wicket:id="lastRefreshTime"></span> <button wicket:id="refresh" class="btn btn-default btn-sm tooltip-trigger" title="Refresh etcd cluster nodes"><span class="fa fa-refresh"></span></button></div>
      </div>

      <p class="hidden h4"><span class="hidden" wicket_id="name"></span><small class="hidden"> [<span wicket_id="address"></span>]</small> <small class="pull-right"><span>Last check 15 minutes ago</span> <a href="#" class="btn btn-default btn-sm"><span class="fa fa-refresh"></span></a></small></p>

      <h4 class="hidden">Leader address: <strong wicket_id="address"></strong></h4>

      <p class="hidden">Last refresh time: <span wicket_id="lastRefreshTime"></span> <span class="pull-right"><button wicket_id="refresh" class="btn btn-default"><span class="fa fa-refresh"></span> Refresh</button></span></p>

    </div><!-- ./panel-body -->

    <div class="table-responsive cluster-peers" wicket:id="clusterPeers"></div>

  </div><!-- ./collapsingBody -->

</div><!-- ./panel -->

<div wicket:id="addClusterModal"></div>
<div wicket:id="deleteClusterModal"></div>

</wicket:panel>
</body>
</html>